<template>
  <div>
    <nav
      class="uk-navbar-container"
      style="background-color: #ebebeb"
      uk-navbar
    >
      <div class="uk-navbar-left">
        <ul class="uk-navbar-nav">
          <!--          <li>-->
          <!--            <a href="#modal-full" uk-toggle><span uk-icon="icon: table" /></a>-->
          <!--          </li>-->
          <li>
            <nuxt-link style="height: 80px" to="/" tag="a"
              ><img style="height: 70px" :src="require('@/assets/logo.png')"
            /></nuxt-link>
          </li>
        </ul>
      </div>

      <div class="uk-navbar-right">
        <ul class="uk-navbar-nav mynav">
          <li>
            <!--            <nuxt-link to="/" tag="a">首页</nuxt-link>-->
            <a href="/">首页</a>
            <!--            <nuxt-link-->
            <!--              :to="{ name: 'categories-slug', params: { slug: category.slug } }"-->
            <!--              tag="a"-->
            <!--            >-->
            <!--              {{ category.name }}-->
            <!--            </nuxt-link>-->
          </li>
          <li><nuxt-link to="/case" tag="a">案例</nuxt-link></li>
          <li><nuxt-link to="/service" tag="a">服务范围</nuxt-link></li>
          <li><nuxt-link to="/about" tag="a">关于</nuxt-link></li>
          <li><nuxt-link to="/contact" tag="a">联系我们</nuxt-link></li>
        </ul>
      </div>
    </nav>

    <div id="modal-full" class="uk-modal-full" uk-modal>
      <div class="uk-modal-dialog">
        <button
          class="uk-modal-close-full uk-close-large"
          type="button"
          uk-close
        />
        <div
          class="uk-grid-collapse uk-child-width-1-2@s uk-flex-middle"
          uk-grid
        >
          <div class="uk-background-cover" uk-height-viewport />
          <!--          :style="{ background: 'url(' + bgimg + ')' }"-->
          <div class="uk-padding-large">
            <h1 style="font-family: Staatliches">极刻视觉</h1>
            <div class="uk-width-1-2@s">
              <ul class="uk-nav-primary uk-nav-parent-icon" uk-nav>
                <li v-for="category in categories" :key="category.id">
                  <nuxt-link
                    class="uk-modal-close"
                    :to="{
                      name: 'categories-slug',
                      params: { slug: category.slug },
                    }"
                    tag="a"
                  >
                    {{ category.name }}
                  </nuxt-link>
                </li>
              </ul>
            </div>
            <p class="uk-text-light">Built by jike</p>
          </div>
        </div>
      </div>
    </div>
    <nuxt />
  </div>
</template>

<script>
if (process.browser) {
    var _hmt = _hmt || [];
    (function() {
      var hm = document.createElement("script");
      hm.src = "https://hm.baidu.com/hm.js?b64033ef9b4c8176616474c517144b5e";
      var s = document.getElementsByTagName("script")[0];
      s.parentNode.insertBefore(hm, s);
    })();
  }

export default {
  
  async fetch() {
    this.categories = await this.$strapi.find("categories");
  },
  data: function () {
    return {
      categories: [],
      // bgimg: bgimg,
    };
  },

};
</script>
